<template>
  <div class="container-contactus">
    <div class="container-contactus-title">Contact Us</div>
    <div class="container-contactus-desc">
      Submit the form and feel free to contact us
    </div>
    <div class="container-contactus-tips">
      Please complete the form below and click submit
    </div>
    <el-form ref="form" :model="form" label-width="160px" style="margin: 20px auto;">
      <el-form-item
        label="Name:"
        :rules="[{ required: true, message: 'Please enter Name', trigger: 'blur' }]">
        <el-input v-model="form.name" style="width: 80%" placeholder="Name"></el-input>
      </el-form-item>
      <el-form-item
        label="Email:">
        <el-input v-model="form.email" style="width: 80%" placeholder="Email address"></el-input>
      </el-form-item>
      <el-form-item
        label="Question type:"
        :rules="[{ required: true, message: 'Please enter Question type', trigger: 'blur' }]">
        <el-radio-group v-model="form.questionType">
          <el-radio label="Data Submission"></el-radio>
          <el-radio label="Report Bug"></el-radio>
          <el-radio label="Data required"></el-radio>
          <el-radio label="others"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="Reported Webpage:">
        <el-input v-model="form.reportedWebpage" style="width: 80%"
                  placeholder="Please enter the page you wish to report"></el-input>
      </el-form-item>
      <el-form-item
        label="Introduction:"
        :rules="[{ required: true, message: 'Please briefly describe your question', trigger: 'blur' }]">
        <el-input v-model="form.introduction"
                  style="width: 80%"
                  type="textarea"
                  :rows="10"
                  placeholder="Please briefly describe your question"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-bottom: 100px" type="primary" @click="submitForm('ruleForm')">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
        reportedWebpage: '',
        questionType: '',
        introduction: ''
      }
    }
  },
  methods: {}
}
</script>

<style scoped>

.container-contactus-tips {
  margin-top: 20px;
  color: #A1969E;
  text-align: center;
  font-size: 12px;
}

.container-contactus-desc {
  margin-top: 20px;
  text-align: center;
  color: #495154;
}

.container-contactus-title {
  color: #716E77;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  padding-top: 20px;
}

.container-contactus {
  margin: 150px auto 100px;
  background-color: #bfd0e2;
  width: 50%;
}
</style>
